<template>
	<view class="box">
		<view class="flex relative" style="margin: 12rpx;" v-for="item in list" :key="item.avater"
			@click="toMsgHandler(item)">
			<view class="avater">
				<!-- <image src="../../static/logo.png" mode="" style="width: 100%;height: 100%;"></image> -->
				<image :src="item.avater" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="flex col">
				<view class="name">
					{{item.username}}
				</view>
				<view class="talk">
					{{item.talk}}
				</view>
			</view>
			<view class="dates absolute" style="right:0;top:-2rpx;white-space: nowrap;">
				{{item.date}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ['list'],
		methods: {
			toMsgHandler(item) {
				// console.log('item:-', item)
				uni.showModal({
					content: `向用户${item.username}发起聊天？`,
					success: async (res) => {
						if (res.confirm) {
							let info = uni.getStorageSync('userinfo')
							let createSession = await wx.cloud.callFunction({
								name: 'logins',
								data: {
									useName: 'createSession',
									user: [{
										avater: item.avater,
										name: item.username,
										openid: item.openid
									}, {
										avater: info.avater,
										name: info.nickname,
										openid: info.openid
									}],
									date: this.$formatDateTime(new Date()),
								}
							})
							let sessionId = createSession.result._id
							let sendMsg = await wx.cloud.callFunction({
								name: 'logins',
								data: {
									useName: 'createMsg',
									content: {
										avater: info.avater,
										image: "", // 聊天图片
										date:this.$formatDateTime(new Date(), true),
										text: "你好我是"+info.nickname // 内容
									},
									receiver: item.openid,
									sessionid: sessionId
								}
							})
							uni.navigateTo({
								url: '/subpack/message/message?id=' + sessionId
							})
							// console.log('用户点击确定',sessionId,"msg--",sendMsg);
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					},
					fail: (err) => {
						console.log("err:", err)
					}
				})
				// uni.switchTab({
				// 	url: '/pages/tabbar/message/index?id='+item.openid
				// });
			},
			// 创建会话、发起聊天 模拟api
			async createSe() {
				let res = await wx.cloud.callFunction({
					name: 'logins',
					data: {
						useName: 'createSession',
						user: [{
							avater: "cloud://animal-4g5ks6ct0e7f251e.616e-animal-4g5ks6ct0e7f251e-1315698572/avater/zmihzIhnOYma6604861c85a691ff3e954540831baa26.jpeg",
							name: "1.",
							openid: "oBiar5NSgldQsAPtf8wW6cvkw3wM"
						}, {
							avater: "https://616e-animal-4g5ks6ct0e7f251e-1315698572.tcb.qcloud.la/7b63f2f6-64a4-3bff-89c9-4606c08a37ca!nd_whgt34_webp_wm_1.jpg?sign=a524732d9122c5d975592cf8a4be3cc9&t=1721957391",
							name: "狗",
							openid: "oBiar5NSgldQsAPtf8wW6cvkw3wM2"
						}],
						date: this.$formatDateTime(new Date()),
					}
				})
				// console.log("res:", res)
			}
		},
		mounted() {
			// console.log('this.list: ', this.list);
		}
	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 200rpx;
		max-height: 600rpx;
		overflow-y: auto;
		background-color: white;
		border-radius: $uni-border-radius-lg;
		margin-top: $uni-spacing-row-base;
		padding: $uni-spacing-row-base;
		color: #000;

		.avater {
			width: 85rpx;
			height: 85rpx;
		}

		.name {
			font-weight: normal;
			font-size: $uni-font-size-sm;
			margin-left: 20rpx;
			height: auto;
		}

		.talk {
			// vertical-align: middle;
			line-height: 85rpx;
			margin-left: 20rpx;
			background-color: #f4f4f4;
			position: relative;
			padding: 2rpx 16rpx;
			// overflow: hidden;
			text-overflow: ellipsis;
			max-width: 380rpx;

			&::after {
				position: absolute;
				content: "";
				top: 25rpx;
				/* 调整三角形的位置 */
				left: -26rpx;
				/* 让三角形居中 */
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid #f4f4f4;
				border-top: 15rpx solid transparent;
				border-bottom: 15rpx solid transparent;
				/* 更改底部边框为红色，形成向上指向的三角形 */
				transform: rotate(45);
			}
		}
	}
</style>